<!-- 页面 -->
<template>
    <div>
        <van-nav-bar title="分类" left-arrow @click-left="onClickRight" />
        <van-tabs v-model="active" @click="ad123">
            <van-tab v-for="(item, index) in list" :key="index" :title=item.name :name=item.id>
            </van-tab>
        </van-tabs>
        <van-row style="background: #fbfbfb; margin-top: 10px;" @click="abcc(item.id)" v-for="(item,index) in list1" :key="index">
            <van-col span="8">
                <img style="width: 100%;" v-lazy="item.list_pic_url" alt="">
            </van-col>
            <van-col span="16">
                <b>{{ item.name }}</b>
                <p>{{ item.goods_brief }}</p>
                <br>
                <b style="font-size: 20px;">{{ item.retail_price|yuan }}</b>
            </van-col>
        </van-row>
        <xia :active1="active1"></xia>
    </div>
</template>
<!-- vue -->
<script>
import xia from '@/components/xia.vue'
export default {
    components: {
        xia
    },
    data() {
        return {
            // 声明的属性
            active: 0,
            list1: [],
            active1: 'fen',
            list: [],
        }
    },
    //生命周期函数
    mounted() {
        // console.log(this.list1);
        this.add()
        this.ad123(1005000)
    },
    // 调用方法
    methods: {
        onClickRight() {
            this.$router.go(-1)
        },
        add() {
            this.$axios.get('http://shop.bufantec.com/bufan/category/categoryNav?id=1005000',).then(res => {
                this.list = res.data.navData
            })
        },
        ad123(name,) {
            this.$axios.get('http://shop.bufantec.com/bufan/goods/goodsList?categoryId='+name,).then(res => {
                this.list1 = res.data.data
            })
        },
        abcc(id){
            this.$router.push({
                name:'xqq',
                query:{
                    id:id
                }
            })
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
        yuan(val){
            return '￥'+val
        }
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style></style>